<template>
  <div class="main-content-box">
    <div id="topoDemo"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
export default {
  name: 'g6demo4',
  data () {
    return {
      demoData: {
        isRoot: true,
        id: 'Root',
        label: 'WIN -STARTNODE',
        text: '\ue600', // 对应iconfont.css 里面的content，注意加u，后面的自行修改一下。
        style: {
          fill: 'red',
        },
        labelCfg: {
          style: {
            fill: 'red',
          },
        },
        backgroundConfig: null, // 自定义项，用于判读是否需要圆背景
        size: 30,
        children: [
          {
            id: 'SubTreeNode1',
            label: 'R2',
            text: '\ue679',
            relation: '9ms',
            children: [
              {
                id: 'SubTreeNode2',
                label: 'R3',
                text: '\ue679',
                relation: '19ms',
              },
              {
                id: 'idr5',
                label: 'R5',
                text: '\ue679',
                relation: '18ms',
                children: [
                  {
                    id: 'IDR8',
                    label: 'R8',
                    text: '\ue679',
                    relation: '17ms',
                    children: [
                      {
                        id: 'idr9',
                        label: 'R9',
                        text: '\ue679',
                        relation: '4ms',
                      }
                    ]
                  },
                ],
              },
              {
                id: 'id1',
                label: 'R1',
                text: '\ue679',
                relation: '9ms',
              },
            ],
          },
        ]
      },
      demoData1: {
        nodes: [
          {
            id: 'node0',
            label: 'WIN -STARTNODE',
            text: '\ue600',
            style: {
              fill: 'red',
            },
            labelCfg: {
              style: {
                fill: 'red',
              },
            },
            backgroundConfig: null, // 自定义项，用于判读是否需要圆背景
            size: 30,
            children: [
              {
                id: 'SubTreeNode1',
                label: 'R2',
                text: '\ue679',
                relation: '9ms',
                children: []
              },
            ]
          },
          {
            id: 'id1',
            label: 'R1',
            text: '\ue679',
            relation: '9ms',

          },
          {
            id: 'SubTreeNode1',
            label: 'R2',
            text: '\ue679',
            relation: '9ms',
            children: [
              {
                id: 'SubTreeNode2',
                label: 'R3',
                text: '\ue679',
                relation: '19ms',
              },
              {
                id: 'idr5',
                label: 'R5',
                text: '\ue679',
                relation: '18ms',
              },
              {
                id: 'id1',
                label: 'R1',
                text: '\ue679',
                relation: '9ms',
              },
            ],
          },
          {
            id: 'SubTreeNode2',
            label: 'R3',
            text: '\ue679',
            relation: '19ms',
          },
          {
            id: 'idr5',
            label: 'R5',
            text: '\ue679',
            relation: '18ms',
            children: [
            ],
          },
          {
            id: 'IDR8',
            label: 'R8',
            text: '\ue679',
            relation: '17ms',
            children: [
              {
                id: 'idr9',
                label: 'R9',
                text: '\ue679',
                relation: '4ms',
              }
            ]
          },
        ],
        edges: [
          {
            shape: 'cubic-horizontal',
            source: 'node0',
            target: 'node2'
          },
          {
            shape: 'cubic-horizontal',
            source: 'node2',
            target: 'node3'
          },
          {
            shape: 'cubic-horizontal',
            source: 'node2',
            target: 'node1'
          },
          {
            shape: 'cubic-horizontal',
            source: 'node2',
            target: 'node5'
          },
          {
            shape: 'cubic-horizontal',
            source: 'node5',
            target: 'node8'
          },
          {
            shape: 'cubic-horizontal',
            source: 'node3',
            target: 'node8'
          },
          {
            shape: 'cubic-horizontal',
            source: 'node8',
            target: 'node9'
          },
          {
            shape: 'cubic-horizontal',
            source: 'node1',
            target: 'node9'
          },
          {
            shape: 'cubic-horizontal',
            source: 'node9',
            target: 'nodeEnd'
          },
        ]
      }
    }
  },
  mounted () {
    this.initGrahp()
  },
  methods: {
    initGrahp () {
      //使用iconfont
      G6.registerNode('iconfont', {
        draw (cfg, group) {
          const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle } = cfg;

          if (backgroundStyle) {
            group.addShape('circle', {
              attrs: {
                x: 0,
                y: 0,
                r: cfg.size,
                ...backgroundStyle,
              },
              // must be assigned in G6 3.3 and later versions. it can be any value you want
              name: 'circle-shape',
            });
          }
          group.addShape('circle', {
            attrs: {
              x: -12,
              y: 0,
              r: 3,
              ...backgroundStyle,
            },
            name: 'circle-shape',
          });

          const keyShape = group.addShape('text', {
            attrs: {
              x: 0,
              y: 0,
              fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
              textAlign: 'center',
              textBaseline: 'middle',
              text: cfg.text,
              fontSize: cfg.size,
              ...style,
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'text-shape1',
          });
          const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;

          group.addShape('text', {
            attrs: {
              x: 0,
              y: labelY,
              textAlign: 'center',
              text: cfg.label,
              ...labelStyle.style,
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'text-shape1',
          });
          return keyShape;
        },
      });
      let COLOR = '#40a9ff'
      //创建G6 图实例
      let width = document.getElementById('topoDemo').scrollWidth * 0.8
      let height = document.getElementById('topoDemo').scrollHeight || 600
      let graph = new G6.TreeGraph({
        container: 'topoDemo',
        width,
        height,
        modes: {
          default: [
            'drag-canvas',
            'drag-node',
            'collapse-expand'
          ]
        },
        defaultNode: {
          backgroundConfig: {
            backgroundType: 'rect',
            fill: COLOR,
            stroke: 'LightSkyBlue',
          },
          type: 'iconfont',
          size: 12,
          style: {
            fill: 'white',
          },
          labelCfg: {
            style: {
              fill: COLOR,
              fontSize: 12,
            }
          },
          linkPoints: {
            top: true,
            bottom: true,
            left: true,
            right: true,
            fill: '#fff',
            size: 5
          }
        },
        layout: {
          type: 'compactBox',
          direction: 'LR',
          getHeight: () => {
            return 26
          },
          getWidth: () => {
            return 26
          },
          getVGap: () => {
            return 20
          },
          getHGap: () => {
            return 50
          },
          // getSide: d => {
          //   if (d.id === 'node1') {
          //     return 'left'
          //   }
          //   return 'right'
          // }
        }
      })


      graph.edge(({ target }) => {
        // console.log(target)
        const fill = target.get('model').backgroundConfig && target.get('model').backgroundConfig.fill;
        // const fill = target.get('model').linebackgroundConfig && target.get('model').linebackgroundConfig.fill;
        return {
          type: 'cubic-horizontal',
          color: fill || COLOR,
          label: target.get('model').relation || '',
          // label: target.get('model').relation + target.get('model').lineicon || '',
          labelCfg: {
            style: {
              fill: fill || COLOR,
              fontSize: 12,
            },
          },
        };
      });


      graph.data(this.demoData);
      graph.render();
      graph.fitView();

    }
  }
}
</script>

<style scoped>
</style>